<template>
  <div v-if="showLoading == true">
    <loading />
  </div>
  <div v-else class="wallet">
    <van-nav-bar
      v-if="hideH5Nav == false"
      :title="t('wallet.pageTitle')"
      left-arrow
      placeholder
      :fixed="true"
      @click-left="onClickLeft"
    />
    <div class="content" :class="{ 'content-height': !isiOS }">
      <div>
        <div class="group">
          <p class="describe">
            {{ $t("wallet.text1") }}
          </p>
          <img src="/image/mvp/wallet/wallet-01.png" alt="" />
        </div>
        <div class="group">
          <p class="describe">
            {{ $t("wallet.text2") }}
          </p>
          <img src="/image/mvp/wallet/wallet-02.png" alt="" />
        </div>

        <div class="group">
          <p class="describe">{{ $t("wallet.text3") }}</p>
          <p class="describe">{{ $t("wallet.text4") }}</p>
          <p class="describe">{{ $t("wallet.text5") }}</p>
          <p class="describe">{{ $t("wallet.text6") }}</p>
          <p class="describe">{{ $t("wallet.text7") }}</p>
          <p class="describe">{{ $t("wallet.text8") }}</p>
          <img src="/image/mvp/wallet/wallet-03.png" alt="" />
        </div>

        <div class="group">
          <p class="describe">{{ $t("wallet.text16") }}</p>
          <img src="/image/mvp/wallet/wallet-05.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
// import { submitReservationApi, searchReservationApi } from "~~/api/wallet";
import { useLoginStore } from "~~/store/modules/login";
import { isiOS, isAndroid, navigateBack } from "@/utils";
// import { showToast } from "vant";

const { t, locale } = useI18n();
const showLoading = ref(true);
const hideH5Nav = ref(false);
const loginStore = useLoginStore();
const firebase = useInitFirebase(); // 初始化firebase
const show = ref(false);
const disabledFlag = ref(false);
const $router = useRouter(); // 路由跳转
const onClickLeft = () => {
  // $router.go(-1);
  navigateBack();
};
// let amount = ref(0);
// const showPopup = async () => {
//   try {
//     const result = await submitReservationApi({});
//     if (result.code == 200) {
//       firebase?.logEvent("BDC_H5_SubmitReservation");
//       show.value = true;
//       amount.value = result.data.amount;
//       disabledFlag.value = true;
//     }
//     if (result?.code == 403) {
//       bridge.onAppLogin();
//       loginStore.$patch({
//         openLoginDialog: true,
//       });
//     }
//   } catch (error) {
//     console.log(error);
//   }
// };

const searchFun = async () => {
  // 1. 解决导航显示问题
  if (isiOS.value) {
    let packageId = bridge.getAppPackageId();
    let basePackageId = "BtcDana.IOS-1.2.15-com.indone.online-ios";
    let compareVersion = compare(packageId, basePackageId);

    if (compareVersion == -1) {
      //小于"BtcDana.IOS-1.2.15-com.indone.online-ios"版本
      hideH5Nav.value = true;
      let title = t("wallet.pageTitle");
      bridge.setTitle(title);
    } else {
      hideH5Nav.value = false;
    }
  }
  if (isAndroid.value) {
    let packageId = bridge.getAppPackageId();
    const versionStrs = packageId.split("-");
    const versionPrefix = versionStrs[0] || "";

    console.log(packageId, "--bbb---", versionPrefix);

    let basePackageId = "";
    // 以下版本判断是为了避免,无导航的情况处理的(2024年以后的新包,基本无需处理这种情况,默认都是显示原生导航)
    if (versionPrefix === "BtcDana") {
      basePackageId = "BtcDana-1.8.83-com.indone.online-android";
    } else if (versionPrefix === "BtcDanaAsia") {
      basePackageId = "BtcDanaAsia-1.0.6-com.indone.online-android";
    }
    // 后续新包(2024年以后的新包,基本无需处理这种情况,默认都是显示原生导航)
    else {
      basePackageId = "";
    }
    // 老版本用原生，中间版本用自己的导航，这里的代码 mvp 版本就废弃了
    if (basePackageId) {
      let compareVersion = compare(packageId, basePackageId);
      if (compareVersion == -1) {
        hideH5Nav.value = true;
      }
    }
    // 其他情况就使用原生导航
    else {
      hideH5Nav.value = true;
    }
  }
  //
  // if (isiOS.value) {
  //   try {
  //     const result = await searchReservationApi({});
  //     if (result.code == 200) {
  //       let status = result.data.status;
  //       disabledFlag.value =
  //         Number(status) == 1 || Number(status) == 2 ? true : false;
  //     }
  //   } catch (error) {
  //     console.log(error);
  //   }
  // }
};
// const confirmFun = () => {
//   show.value = false;
// };

// onBeforeMount(() => {
//   searchFun();
// });
onMounted(() => {
  searchFun();
  showLoading.value = false;
});
</script>
<style lang="scss" scoped>
.wallet {
  height: 100vh;
  overflow: hidden;
  .navStyle {
    margin-top: 94px;
  }
  .content {
    padding: 40px 30px 0 30px;
    border-top: 1px solid #d4d4d4;
    // height: 100vh;
    height: calc(100vh - 44 * 2px - 25 * 2px);
    overflow: scroll;
    &-height {
      height: 100vh !important;
    }
  }
  .group {
    margin-bottom: 40px;
    &:last-child {
      margin-bottom: 0;
    }
    img {
      margin-top: 20px;
      width: 100%;
    }
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    text-align: center;
    padding: 15px 30px 20 * 2px 30px;
    background: #fff;
    width: 100%;
    .btn {
      border-radius: 44px;
      background: var(--Brand-Blue, #007bff);
      color: #fff;
      height: 80px;
      line-height: 80px;
      font-size: 30px;
    }
    .footer-text {
      color: var(--Gray, #797c83);
      font-size: 22px;
      font-weight: 400;
      margin-top: 12px;
      padding: 0 5px;
    }
  }
}
.title {
  color: var(--Black-Blue, #141924);
  font-weight: 590;
  line-height: 40px;
  font-size: 30px;
}
.describe {
  color: var(--Black-Blue, #141924);
  font-size: 26px;
  font-weight: 400;
  line-height: 36px;
  font-weight: 400;
}
.btnDisabled {
  background: #797c83 !important;
  cursor: not-allowed;
}
.mengban {
  z-index: 9999;
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  .dialog {
    width: 530px;
    height: 500px;
    background: #fff;
    border-radius: 40px;
    text-align: center;
    padding: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .imgBox {
      width: 210px;
      height: 210px;
      margin: 0 auto;
      img {
        width: 100%;
      }
    }

    .con {
      padding: 30px 0;
      .title {
        color: var(--Black-Blue, #141924);
        font-size: 34px;
        font-weight: 590;
        line-height: 44px;
      }
      .bdc {
        color: var(--Brand-Blue, #007bff);
        font-size: 34px;
        font-weight: 590;
        line-height: 44px;
      }
    }
    .bottom {
      .confirmBtn {
        border-radius: 46px;
        background: #007bff;
        color: #fff;
        height: 80px;
        line-height: 80px;
        text-align: center;
        font-size: 30px;
      }
    }
  }
}
</style>
